<template>
  <el-dropdown @command="handleCommand" trigger="click" placement="bottom">
      <span class="el-dropdown-link">
        {{selectLabel}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        v-for="item in options"
        :key="item.value"
        :command="item.value">
        {{item.label}}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
  /*
  国际化语言切换组件
  将需要国际化的地方使用变量代替,即 {{$t("message.text")}},
  同时在locales>>lang下message对象中同时加入text变量
  */
  export default {
    name: "International",
    data() {
      return {
        selectValue: "cn",
        selectLabel: "中文",
        options: [
          {
            value: 'cn',
            label: '中文'
          },
          {
            value: 'en',
            label: 'English'
          }
        ]
      }
    },
    created() {
      const that = this;
      const lang = localStorage.lang;
      if (lang) {
        that.selectValue = lang;
        that.options.forEach(item => {
          if (item.value === lang) {
            that.selectLabel = item.label;
          }
        })
      } else {
        that.selectValue = "cn";
        that.selectLabel = "中文";
      }
    },
    methods: {
      //语言切换
      handleCommand(e) {
        this.$i18n.locale = e;
        localStorage.setItem('lang', e);
        this.options.forEach(item => {
          if (item.value === e) {
            this.selectLabel = item.label;
          }
        });
      }
    }
  }
</script>
<style scoped>
  .el-dropdown-link {
    cursor: pointer;
  }
</style>
